<!DOCTYPE html>
<html ng-app="ionic">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Sample UL</title>

    <link  href="/dist/css/ionic.css" rel="stylesheet">
    <script src="/dist/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <ion-side-menus>

      <ion-side-menu-content>
        <ion-header-bar class="bar-positive">
          <h1 class="title">Change screen to large and back</h1>
        </ion-header-bar>
        <ion-content>
          <h4>WHATS UP</h4>
          <ion-list can-swipe="true">
            <ion-item class="item" collection-repeat="item in items">
              <h2>{{item.text}}</h2>
            </ion-item>
          </ion-list>
          <h2>Stuff after list</h2>
          <div class="card">Hello</div>
        </ion-content>
      </ion-side-menu-content>

      <ion-side-menu side="left" expose-aside-when="large">
        Hello
      </ion-side-menu>

    </ion-side-menus>
  <script>
angular.module('ionic').controller('MainCtrl',MainCtrl)
function MainCtrl($scope, $timeout) {
  $scope.items = [];

  function addImage() {
    var i = $scope.items.length;
    $scope.items.push({
      text: 'Item ' + i,
      image: 'http://placekitten.com/'+(100+50%i)+'/'+(100+50%i)
    });
  }

  $timeout(function() {
    for (var i = 0; i < 100; i++) addImage();
  }, 1000);
}
  </script>
  <style>
  </style>
</body>
</html>
